<template>
  <div class="header" :class="[showHeader]">
  	<div class="header-back" :class="[showBack]">
  		<span class="iconfont">&#xe614;</span>
  	</div>
  	<div class="header-search" :class="[showSearch]">
  		<span class="iconfont">&#xe6d1;</span>
  		上海海昌海洋公园
  	</div>
  	<div class="header-city" :class="[showCity]">
  		{{this.city}}
  		<span class="iconfont">&#xe651;</span>
  	</div>
  </div>
</template>

<script>
export default {
  name: 'homeHeader',
  props:['city'],
  data(){
  	return{
  		showBack:'',
  		showHeader:'',
  		showSearch:'',
  		showCity:'',
  	}
  	
  },
  methods:{
        scrollChange(){
            let height=document.documentElement.scrollTop
            // console.log(height)
            if(height>10){
                this.showHeader='showHeader'
                this.showBack='showBack'
                this.showSearch='showSearch'
                this.showCity='showCity'

            }else{
              this.showHeader=''
              this.showBack=''
              this.showSearch=''
              this.showCity=''
            }
        }
    },
    mounted(){
        window.addEventListener('scroll',this.scrollChange)
    }
}
</script>


<style lang="stylus" scoped>
.showHeader
	background:#fff
.header
	line-height:0.88rem
	text-align:center
	display:flex
	.header-back
		float:left
		width:.9rem
	.showBack
		color:#000
	.showSearch
		color:#aaa
		background:#ccc
	.showCity
		color:#000
	.header-search
		flex:1
		height:.6rem
		line-height:.6rem
		margin-top:.2rem
		margin-left:.2rem
		margin-right:.2rem
		border-radius:.5rem
		box-shadow:0 0 .01rem .02rem #ccc
	.header-city
		float:right
		width:1.4rem
</style>
